<!--
  盛付通： 【签约开通】 页面内容

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/03 08:35
-->
<template>
  <div v-if="vdata.state == '2'">
    <a-tabs @change="selectTabs">
      <a-tab-pane key="signConfig" tab="认证开通">
        <NextBizsCommonPage ref="nextBizsCommonPage" />
      </a-tab-pane>
      <a-tab-pane key="payWayRateConfig" tab="分账配置">
        <a-form
          ref="stepForm1Ref"
          :model="vdata.applyData"
          :wrapper-col="{ span: 24 }"
          :rules="vdata.rules"
        >
          <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">分账比例配置</a-divider>
          <a-form-item label="分账比例" name="applyRatio">
            <a-input-number
              v-model:value="vdata.applyData.applyRatio"
              :precision="0"
              :min="0"
              :max="100"
            >
              <template #addonAfter>%</template>
            </a-input-number>
            <br>
            <span class="jeepay-tip-text">( 比例超过 [20%] 需联系斗拱审核; 配置后请查看短信/邮箱，签约合同后才可开通分账配置 )</span>
          </a-form-item>
          <div class="drawer-btn-center">
            <a-button class="jeepay-m-btn" data-type="block" type="primary" :loading="vdata.btnLoading" @click="onSubmit"><check-outlined />确认配置</a-button>
          </div>
        </a-form>
        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">
          配置结果
          <a-button
            class="jeepay-m-btn"
            data-type="text"
            :loading="vdata.bizSignInfoBtnLoading"
            size="small"
            style="margin-left: 20px;"
            type="primary"
            @click="queryFun()"
          >
            <reload-outlined />刷新
          </a-button>
        </a-divider>
        <a-row :gutter="16">
          <a-col :sm="12">
            <a-descriptions>
              <a-descriptions-item label="配置状态">
                {{ vdata.configJson.div_flag == 'Y'?'已配置':'未配置' }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
          <a-col :sm="12">
            <a-descriptions>
              <a-descriptions-item label="分账比例">
                {{ vdata.configJson.apply_ratio }} %
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
        </a-row>
      </a-tab-pane>
    </a-tabs>
  </div>
  <div v-else>
    <a-result title="暂无更多操作">
      <template #icon>
        <smile-twoTone />
      </template>
    </a-result>
  </div>
</template>

<script lang="ts" setup>

import { ref, inject, nextTick } from 'vue'
import NextBizsCommonPage from '../../commons/NextBizsCommonPage.vue'
import ruleGenerator from '@/utils/ruleGenerator'
import { req, $dgpayConfigOpen, $dgpayConfigOpenQuery } from '@/api/manage'
import { getCurrentInstance, reactive } from 'vue'
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

// 接收父组件的参数注入： 进件详细欣欣
let applyRecord : any = inject('applyRecord')
const nextBizsCommonPage = ref()

const vdata : any = reactive({
  bizSignInfoBtnLoading: false,
  state: '',
  recordId: null, // 更新对象ID
  applyData: {} as any, // 进件资料对象
  visible: false, // 是否显示弹层/抽屉
  rules: {
      applyRatio: [ ruleGenerator.requiredInput('分账比例', 'number') ],
  },
  queryResult: {} as any,
  configJson: {} as any,
})

function onSubmit() {

  if (!vdata.applyData.applyRatio) {
    return $infoBox.message.error('请填写分账比例')
  }

  vdata.btnLoading = true

  $dgpayConfigOpen(vdata.recordId, {applyRatio: vdata.applyData.applyRatio}).then(() => { 
    $infoBox.message.success('审核中')
    vdata.btnLoading = false
  }).catch(() => {
    vdata.btnLoading = false
  })
  
}

function selectTabs (key) { // 清空必填提示
  if (key) {
    vdata.groupKey = key
  }
}

function queryFun() {
  if (vdata.state == 2) {
    vdata.bizSignInfoBtnLoading = true
    $dgpayConfigOpenQuery(vdata.recordId).then((item) => { 
      vdata.queryResult = JSON.parse(item)

      if (vdata.queryResult.split_bill_result) {
        vdata.configJson = JSON.parse(vdata.queryResult.split_bill_result)
        vdata.configJson = vdata.configJson[0]
      }
      
      vdata.bizSignInfoBtnLoading = false
      vdata.btnLoading = false
    }).catch(() => {
      vdata.bizSignInfoBtnLoading = false
      vdata.btnLoading = false
    })
  }
}

function pageRender (recordId) { // 弹层打开事件
  vdata.detailData = applyRecord

  vdata.recordId = recordId
  // 状态
  vdata.state = vdata.detailData.state
  // 单号
  vdata.recordId = vdata.detailData.applyId
  // 类型 
  vdata.ifCode = vdata.detailData.ifCode
  // 商户号
  vdata.mchNo = vdata.detailData.mchNo
  
  if (vdata.detailData.channelVar1) {
    let channelVar1 = JSON.parse(vdata.detailData.channelVar1)
    if (channelVar1.applyRatio) {
      vdata.applyData.applyRatio = channelVar1.applyRatio
    }
  }

  queryFun()

  nextTick(() => {
    nextBizsCommonPage.value.pageRender(vdata.recordId) // 直接调用通用组件
  })
}

defineExpose({ pageRender })
</script>